<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>古画商城-后台管理</title>
</head>
<body>
<jsp:include page="header.jsp"/>
<jsp:include page="css.jsp"/>
<c:if test="${empty user}">
    <jsp:forward page="../login.jsp"></jsp:forward>
</c:if>
<c:if test="${!empty user}">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2 list-left">
                <button data-toggle="modal" data-target="#add-catalog-model" type="button" class="btn btn-md btn-link">添加分类</button>
                <c:if test="${!empty catalogs}">
                    <c:forEach items="${catalogs}" var="catalog" varStatus="ct">
                        <div class="catalog-item">
                            <span>${catalog.name}</span>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    操作 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:void (0);"
                                           onclick="updateCatalog('${catalog.id}', '${catalog.name}')">编辑</a></li>
                                    <li><a class="dropdown-item" href="javascript:void (0);" onclick="deleteCatalog('${catalog.id}')">删除</a></li>
                                </ul>
                            </div>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
            <div class="col-md-10 list-right">
                <a href="${pageContext.request.contextPath}/addAncientPaintingView.action" class="btn btn-md btn-link" type="button">添加古画</a>
                <table class="table">
                    <thead>
                    <tr>
                        <th>
                            序号
                        </th>
                        <th>
                            分类
                        </th>
                        <th>
                            古画名
                        </th>
                        <th>
                            画家
                        </th>
                        <th>
                            出版社
                        </th>
                        <th>
                            价格
                        </th>
                        <th>
                            作品
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:if test="${!empty ancientPaintings}">
                        <c:forEach items="${ancientPaintings}" var="ancientPainting" varStatus="vs">
                            <c:if test="${vs.count%2==0}">
                                <tr class="table-active">
                                    <td>${vs.count}</td>
                                    <td>${ancientPainting.catalogName}</td>
                                    <td>${ancientPainting.name}</td>
                                    <td>${ancientPainting.author}</td>
                                    <td>${ancientPainting.press}</td>
                                    <td>${ancientPainting.price}</td>
                                    <td>
                                        <c:if test="${ancientPainting.path.length() > 0}">
                                            <img src="${ancientPainting.path}" width='80' height='80' alt="加载失败"/>
                                        </c:if>
                                        <c:if test="${ancientPainting.path.length() == null || ancientPainting.path.length() == 0}">
                                            <img src="images/img_blank.png" width='80' height='80'/>
                                        </c:if>
                                    </td>
                                    <td><a href="updateAncientPaintingView.action?id=${ancientPainting.id}"/>修改|<a href="deleteAncientPainting.action?id=${ancientPainting.id}"/>删除</td>
                                </tr>
                            </c:if>
                            <c:if test="${vs.count%2!=0}">
                                <tr>
                                    <td>${vs.count}</td>
                                    <td>${ancientPainting.catalogName}</td>
                                    <td>${ancientPainting.name}</td>
                                    <td>${ancientPainting.author}</td>
                                    <td>${ancientPainting.press}</td>
                                    <td>${ancientPainting.price}</td>
                                    <td>
                                        <c:if test="${ancientPainting.path.length() > 0}">
                                            <img src="${ancientPainting.path}" width='80' height='80' alt="加载失败"/>
                                        </c:if>
                                        <c:if test="${ancientPainting.path.length() == null || ancientPainting.path.length() == 0}">
                                            <img src="images/img_blank.png" width='80' height='80'/>
                                        </c:if>
                                    </td>
                                    <td><a href="updateAncientPaintingView.action?id=${ancientPainting.id}"/>修改|<a href="deleteAncientPainting.action?id=${ancientPainting.id}"/>删除</td>
                                </tr>
                            </c:if>
                        </c:forEach>
                    </c:if>
                    <c:if test="${empty ancientPaintings}">
                        <tr>
                            <td colspan="6">无</td>
                        </tr>
                    </c:if>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</c:if>

<%-- 分类模态框，在添加分类按钮上绑定data-target="#add-catalog-model"，add-catalog-model与该模态框的id对应 --%>
<div class="modal fade" id="add-catalog-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-catalog-form" action="addCatalog.action" method="post">
                    <div class="form-group row login-container-field">
                        <label for="input-name" class="col-sm-2 col-form-label">分类</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="input-name" name="name" placeholder="请输入分类名称" maxlength="20" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="add-catalog-btn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<%-- 分类模态框，在添加分类按钮上绑定data-target="#add-catalog-model"，add-catalog-model与该模态框的id对应 --%>
<div class="modal fade" id="update-catalog-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="update-catalog-form" action="updateCatalog.action" method="post">
                    <input type="text" class="form-control-plaintext" id="catalog-update-id" name="id" style="display: none;">
                    <div class="form-group row login-container-field">
                        <label for="catalog-update-name" class="col-sm-2 col-form-label">分类</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control-plaintext" id="catalog-update-name" name="name" placeholder="请输入分类名称" maxlength="20"
                                   required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="update-catalog-btn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<%--删除分类模态框--%>
<div class="modal fade" id="delete-catalog-model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="delete-catalog-form" action="deleteCatalog.action" method="post">
                    <input type="text" class="form-control-plaintext" id="catalog-delete-id" name="id" style="display: none;">
                </form>
                <p>确认删除该分类吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
                <button type="button" id="delete-catalog-btn" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .list-left {
        border-right: #eeeeee 1px solid;
    }

    .list-right {
        border-left: #eeeeee 1px solid;
    }

    .catalog-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding-left: 12px;
        margin: 0 0 8px 12px;
        border-radius: .25rem;
        border: 1px solid #ccc;
    }
</style>
<jsp:include page="footer.jsp"/>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#add-catalog-btn").click(function (event) {
            let name = $("#input-name").val();
            if (!name) {
                alert("请完善信息！");
                return;
            }
            $("#add-catalog-form").submit();
        });

        // 新增分类模态框隐藏的时候重置注册表单
        $('#add-catalog-model').on('hidden.bs.modal', function (event) {
            document.getElementById("add-catalog-form").reset();
        });

        // 新增分类框隐藏的时候重置注册表单
        $('#add-catalog-model').on('show.bs.modal', function (event) {
            document.getElementById("add-catalog-form").reset();
        });

        $("#update-catalog-btn").click(function (event) {
            let name = $("#catalog-update-name").val();
            if (!name) {
                alert("请完善信息！");
                return;
            }
            $("#update-catalog-form").submit();
        });

        // 编辑分类模态框隐藏的时候重置注册表单
        $('#update-catalog-model').on('hidden.bs.modal', function (event) {
            document.getElementById("update-catalog-form").reset();
        });

        $("#delete-catalog-btn").click(function (event) {
            $("#delete-catalog-form").submit();
        });

        // 编辑分类模态框隐藏的时候重置注册表单
        $('#delete-catalog-btn').on('hidden.bs.modal', function (event) {
            document.getElementById("delete-catalog-form").reset();
        });
    });

    function updateCatalog(id, name) {
        $("#catalog-update-id").val(id);
        $("#catalog-update-name").val(name);
        $('#update-catalog-model').modal('show');
    }

    function deleteCatalog(id) {
        $("#catalog-delete-id").val(id);
        $('#delete-catalog-model').modal('show');
    }
</script>
</html>